import React,{ useState,useEffect } from 'react'

export default function MyComponent() {
    const [visible,setVisible] = useState(false);

    return (
        <>
        {visible && <MyChildComponent/>}
        <button onClick={() => setVisible(!visible)}>Toggle Child component vi</button>
        </>
    )
}

const MyChildComponent = () => {
    useEffect(() => {
        console.log('mounted')
        return () => {
            console.log('unmounted')
        }
    },[])

    return (
        <div>
        
        </div>
    )
}
